<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>用户信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" href="../../css/index.css" />
		<style>
			html,body {
				background-color: #efeff4;
			}
			
			.mui-views,.mui-view,.mui-pages,.mui-page,.mui-page-content {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: #efeff4;
			}
			
			.mui-pages {
				top: 46px;
				height: auto;
			}
			
			.mui-navbar {
				position: fixed;
				right: 0;
				left: 0;
				z-index: 10;
				height: 44px;
				background-color: #f7f7f8;
			}
			
			.mui-navbar .mui-bar {
				position: absolute;
				background: transparent;
				text-align: center;
			}
			
			.mui-android .mui-navbar-inner.mui-navbar-left {
				opacity: 0;
			}
			
			.mui-page {
				display: none;
			}
			
			.mui-pages .mui-page {
				display: block;
			}
			
			.mui-page .mui-table-view:first-child {
				margin-top: 15px;
			}
			
			.mui-page .mui-table-view:last-child {
				margin-bottom: 30px;
			}
			
			.mui-table-view {
				margin-top: 20px;
			}
			
			.mui-table-view-divider:before,
			.mui-table-view-divider:after {
				height: 0;
			}
			
			.head {
				height: 40px;
			}
			
			#head {
				line-height: 40px;
			}
			
			.head-img {
				width: 56px;
				height: 40px;
			}
			
			.mui-bar {
				background-color: #43484e;
			}
			
			.mui-bar .mui-title {
				color: #fff;
			}
			
			.mui-icon-back:before,
			.mui-icon-left-nav:before {
				color: #fff;
			}
			
			.usergroup {
				color: #333333;
				font-size: 16px;
			}
			
			.yesicon {
				color: #118CD1;
				float: right;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #FFFFFF;
			}
			
			.mui-table-view .mui-media-object {
				line-height: 42px;
				max-width: 53px;
				height: auto;
				border-radius: 100px;
			}
			
			.userimg {
				width: 10px;
				height: 10px;
			}
			.qhzh{
				color: #0487D0;
			}
			/*问题反馈在setting页面单独的css==end*/
		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">
				</div>
				<div class="mui-pages">
				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">用户信息</h1>
			</header>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div id="user">
							<ul class="mui-table-view mui-table-view-chevron">
								<li class="mui-table-view-cell mui-media">
									<a class="mui-navigate-right" href="#account">
										<img class="mui-media-object mui-pull-left head-img" id="head-img" :src="imgUuid" onerror="this.src='../../img/timg.jpg';this.onerror=null">
										<div class="mui-media-body" v-cloak>
											{{realName}}
											<p class='mui-ellipsis'><img class="userimg" src="../../icon/userinfo1.png" />&nbsp;{{account}}</p>
											<p class='mui-ellipsis'><img class="userimg" src="../../icon/userinfo2.png" />&nbsp;{{phone}}</p>
											<p class='mui-ellipsis'><img class="userimg" src="../../icon/userinfo3.png" />&nbsp;{{email}}</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
						<ul class="mui-table-view mui-table-view-chevron">
							<li class="mui-table-view-cell">
								<a href="javascript:void(0)" class="mui-navigate-right qhzh">切换账号</a>
							</li>
						</ul>
						<!--用户群组-->
						<div id='usergroup'>
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-collapse">
									<a class="mui-navigate-right" href="#">用户群组</a>
									<ul v-for="(item,index) in group">
										<li class="mui-collapse-content" v-on:click="getgroup(index)">            <!--userInfo.groupId==undefined ? index==0 : userInfo.groupId==item.groupId-->
											<p class="usergroup">{{item.groupName}}<small class="yesicon group" :id="'g' + index"><span v-show="userInfo.groupId==undefined ? index==0 : userInfo.groupId==item.groupid">✓</span></small></p>
										</li>
									</ul>
								</li>
							</ul>
							<!--用户岗位-->
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-collapse">
									<a class="mui-navigate-right" href="#">用户岗位</a>
									<ul v-for="(item,index) in post">
										<li class="mui-collapse-content" v-on:click="getpost(index)">
											<p class="usergroup">{{item}}
												<!--<small class="yesicon post" :id="'p'+ index " ><span v-show="index==0">✓</span></small>--></p>
										</li>
									</ul>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>

	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.view.js "></script>
	<script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/vue2.5.js"></script>
	<script type="text/javascript" src="../../js/globalVariable.js"></script>
	<script>
		mui.init();
		var msg={'obj':false};
		$('.qhzh').on('tap',function(){
			tokenInvalid(msg);
		})
		
		
		$(function() {
			//获取登陆的tonkid
			userInfo = getGlobalUserInfo(); //获取对象
            
			console.log(userInfo);
			//绑定个人信息
			new Vue({
				el: '#user',
				data: {
					realName: userInfo.realName,
					account: userInfo.account,
					phone: userInfo.phone,
					email: userInfo.email,
					imgUuid:userInfo.LOGINURL+"/arctron-usercenter"+userInfo.imgUuid

				}
			})

			//获取当前群组
			$.ajax({
					type:"GET",
					url:userInfo.url+"/mobile/showUserInfoNew",
					async:true,
					beforeSend:function(request){
					request.setRequestHeader('tokenID',userInfo.tokenId);
					},
					dataType: 'JSON',
					data:{
					   projId:userInfo.projId,
                       userId:userInfo.userId, 
					},
					success:function(data){
						//登录失效
						if(data.obj===false) {
							tokenInvalid(data);
							return;
							}
					groupNames=[];
					for(var key in data.obj.groupNames){
//						alert(key+"="+data.obj.groupNames[key])
						groupNames.push({groupid:key,groupName:data.obj.groupNames[key]});
					}
					
					 console.log('群组',groupNames);
						new Vue({
						el: '#usergroup',
						data: {
							userInfo:userInfo,
							group: groupNames,
							post: data.obj.posNames,
						},
						methods: {
							getgroup: function(index) {
								$('.group').empty();
								$('#g' + index).html("✓");
//								alert(groupNames[index].groupid);
								//将这个存入userinfo里面的groupid
								console.log(userInfo);
//								userInfo = getGlobalUserInfo(); //获取对象
								userInfo.groupId=groupNames[index].groupid;
								userInfo.groupName=groupNames[index].groupName;
								setGlobalUserInfo(userInfo);
							},
							getpost: function(index) {
								$('.post').empty();
//								$('#p' + index).html("✓");
							}
						}
					})
					}
			});			
	
		});

		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
	</script>

</html>